<template>
  <div>
    <a-button @click="handleClick">AI 题目分析</a-button>
    <a-modal v-model:visible="visible" title="设置题目" @cancel="handleCancel">
      <div class="spin-wrapper">
        <a-form v-if="loading" :model="form">
          <a-form-item field="name" label="题目">
            <a-input v-model="form.name" />
          </a-form-item>
        </a-form>
        <a-spin v-else tip="AI正在思考中, 请稍等..."></a-spin>
      </div>
      <template #footer>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleSubmit">确定</a-button>
      </template>
    </a-modal>
  </div>
  <div>
    <div ref="myPage" class="my-graph" style="height:calc(100vh);">
      <RelationGraph ref="graphRef" :options="graphOptions"></RelationGraph>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, ref, reactive, onMounted } from 'vue';
import RelationGraph from 'relation-graph-vue3';
import type { RGOptions, RGJsonData, RGNode, RGLine, RGLink, RGUserEvent, RelationGraphComponent } from 'relation-graph-vue3';
import axios from 'axios'; // 引入 axios 用于发送请求

const message = ref('')
const graphOptions: RGOptions = {
    allowSwitchLineShape: true,
    allowSwitchJunctionPoint: true,
    defaultLineColor: 'rgba(255, 255, 255, 0.6)',
    defaultNodeColor: 'transparent',
    defaultNodeBorderWidth: 1,
    defaultNodeBorderColor: 'rgba(255, 255, 255, 0.3)',
    defaultNodeFontColor: '#ffffff',
    defaultNodeWidth: 200,
    defaultNodeHeight: 50,
    toolBarDirection: 'h',
    toolBarPositionH: 'left',
    toolBarPositionV: 'top',
    defaultPolyLineRadius: 10,
    defaultLineShape: 6,
    defaultJunctionPoint: 'lr',
    layout: {
        layoutName: 'tree',
        from: 'left',
        'min_per_width': 410,
        'min_per_height': 50,
    }
};

const graphRef = ref<RelationGraphComponent>();

onMounted(() => {
    showGraph();
});

const showGraph = async (graphData: RGJsonData | null = null) => {
    const __graph_json_data = graphData || {
        rootId: "N1",
        nodes: [
            {
                "id": "N1",
                "text": "计算给定数字的阶乘并打印输出"
            },
            {
                "id": "N2",
                "text": "阶乘定义"
            },
            {
                "id": "N2-1",
                "text": "阶乘是所有小于或等于该数的正整数的乘积"
            },
            {
                "id": "N3",
                "text": "编程语言基础"
            },
            {
                "id": "N3-1",
                "text": "Python"
            },
            {
                "id": "N4",
                "text": "循环结构"
            },
            {
                "id": "N4-1",
                "text": "循环结构用于实现阶乘计算的迭代过程"
            },
            {
                "id": "N5",
                "text": "字符串操作"
            },
            {
                "id": "N5-1",
                "text": "字符串操作用于将结果以逗号分隔的形式打印"
            },
            {
                "id": "N6",
                "text": "输入输出格式要求"
            },
            {
                "id": "N6-1",
                "text": "理解输入输出格式要求对于实现正确输出至关重要"
            }
        ],
        lines: [
            {
                "from": "N1",
                "to": "N2",
            },
            {
                "from": "N1",
                "to": "N3",
            },
            {
                "from": "N1",
                "to": "N4",
            },
            {
                "from": "N1",
                "to": "N5",
            },
            {
                "from": "N1",
                "to": "N6",
            },
            {
                "from": "N2",
                "to": "N2-1",
            },
            {
                "from": "N3",
                "to": "N3-1",
            },
            {
                "from": "N4",
                "to": "N4-1",
            },
            {
                "from": "N5",
                "to": "N5-1",
            },
            {
                "from": "N6",
                "to": "N6-1",
            }
        ]
    };

    const graphInstance = graphRef.value?.getInstance();
    if (graphInstance) {
        await graphInstance.setJsonData(__graph_json_data);
        await graphInstance.moveToCenter();
        await graphInstance.zoomToFit();
    }
};
const loading = ref(true);
const visible = ref(false);
const form = reactive({
    name: '',
    post: ''
});

const handleClick = () => {
    visible.value = true;
};

const handleCancel = () => {
    visible.value = false;
};

const handleSubmit = async () => {
    const question = form.name;
    if (question) {
        try {
            loading.value = false;
            const response = await axios.post(`/work/graph?question="${question}"`);
            const graphData = response.data;
            console.log('Graph data:', graphData);
            await showGraph(graphData);
            visible.value = false;
            loading.value = true;
        } catch (error) {
            console.error('请求出错:', error);
        }
    }
};
</script>

<style lang="scss" scoped>
::v-deep(.relation-graph) {
    .rel-map {
        background: none !important;
        .rel-node-shape-1 {
            background: rgba(255, 255, 255, 0.2) !important;
            border-radius: 10px;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }
    }
    .rel-toolbar{
        color: #ffffff;
        .c-current-zoom{
            color: #ffffff;
        }
    }
}
@keyframes backgroundGradient {
  0% {
    background-position: 70% 0%;
  }
  50% {
    background-position: 31% 100%;
  }
  100% {
    background-position: 70% 0%;
  }
}
.my-graph{
  background: radial-gradient(circle at center, #aff69e 0%, #9ed8f6 10%, #f69ee5 20%, #d4980e 30%, #daa93a 40%, #3eda3a 50%, #b9ed94 60%);
  background-size: 1000% 1000%;
  animation: backgroundGradient 30s ease infinite;
}
.spin-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>